<template>
  <div class="lin-container">
    <el-form ref="formRules" label-width="120px" :model="form" :rules="formRules">
      <el-form-item label="标题" prop="indexTitle">
        <el-input v-model="form.indexTitle" style="width:420px"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="indexName">
        <el-input type="textarea" v-model="form.indexName" style="width:420px" maxlength="100" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="选择类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择" style="width:220px">
          <el-option
            v-for="item in selectList"
            :label="item.indexTitle"
            :value="item.id"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上传图片" class="uploadimage">
        <upload-imgs
          :queryId="queryId"
          ref="uploadEle"
          :rules="rules"
          :imageFileList="imageFileList"
          @setForm="getForm"
        />
      </el-form-item>
    </el-form>
    <editor :defaultContent="defaultContent" @change="getChange"></editor>
    <div class="action">
      <el-button @click="goback">返回</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
    <el-image-viewer
      hide-on-click-modal
      @close="()=>{showViewer = false}"
      v-if="showViewer && viewFileList.length>0"
      :url-list="viewFileList"
      :initial-index="0"
    />
  </div>
</template>
<script >
import UploadImgs from "@/components/UploadImg/index.vue";
import Editor from "@/components/tinymce";
import {
  addOrUpdateMenu,
  menuGetModuleContent,
  getNewsContent
} from "@/api/PC-Home.js";
import Base64 from "@/utils/queryCode.js";
export default {
  components: {
    UploadImgs,
    Editor
  },
  data() {
    return {
      form: {
        indexTitle: "",
        indexContent: "",
        type: "",
        indexName:""
      },
      dialogTitle: "",
      dialogFormVisible: false,
      formLabelWidth: "140px",
      rules: {
        maxSize: 1,
        minWidth: 100,
        minHeight: 100
      },

      imageFileList: [],
      file: null,
      showViewer: false,
      viewFileList: [],
      defaultContent: "请输入内容",
      htmlinner: null,
      queryId: null,
      articleId: null,
      type: null,
      selectList: [],
      formRules: {
        indexTitle: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
        ],
        indexName: [
          { required: true, message: '请输入文章简介', trigger: 'blur' },
        ],
        type: [
          {
            required: true,
            trigger: "change",
            message: "请选择文章类型"
          }
        ]
      }
    };
  },
  mounted() {
    this.getQueryId();
    this.menuGetModuleContent();
    this.$nextTick(() => {
      this.$refs.uploadEle.clearFileList();
    });
  },
  methods: {
    getQueryId() {
      this.queryId = Base64.decode(this.$route.query.parentId);
      this.articleId = Base64.decode(this.$route.query.id);
      this.type = Base64.decode(this.$route.query.type);
      if(this.articleId){
        this.getNewsContent();
      }
      
    },
    handleClick(str) {
      this.dialogTitle = str;
      this.dialogFormVisible = true;
    },
    showBigImage(url) {
      this.viewFileList = [];
      this.showViewer = true;
      this.viewFileList.push(url);
    },
    getForm(value) {
      this.file = value;
    },
    goback() {
      this.$router.go(-1);
    },
    submit() {
      this.$refs.formRules.validate(validate => {
        if (validate) {
          let file = this.file;
          let formMart = null;
          formMart = new FormData();
          formMart.append("file", file ? file.raw : "");
          formMart.append("parentId", this.form.type);
          formMart.append("indexTitle", this.form.indexTitle);
          formMart.append("indexSort", this.form.indexSort);
          formMart.append("indexName", this.form.indexName);
          formMart.append("indexContent", this.htmlinner);
          formMart.append(
            "id",
            this.articleId && this.articleId !== "undefined"
              ? this.articleId
              : ""
          );
          addOrUpdateMenu(formMart).then(res => {
            if (res.code === 200) {
              this.$message.success("上传成功");
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },
    getChange(value) {
      this.htmlinner = value;
      this.defaultContent = value;
    },
    menuGetModuleContent() {
      let param = {
        id: null
      };
      if (this.type === "business") {
        param.id = 402;
      }

      menuGetModuleContent(param).then(res => {
        this.selectList = res.data;
      });
    },
    getNewsContent() {
      this.imageFileList = [];
      let param = {
        id: this.articleId
      };
      getNewsContent(param).then(res => {
        this.form.indexTitle = res.data.indexTitle;
        this.form.indexName = res.data.indexName;
        this.form.type = res.data.parentId;
        this.htmlinner = res.data.indexContent;
        this.defaultContent = res.data.indexContent;
        this.imageFileList.push({
          name: res.data.indexTitle,
          url: process.env.VUE_APP_URL + "/" + res.data.indexImg
        });
      });
    }
  }
};
</script>
<style scoped lang="scss">
.lin-wrap {
  padding: 40px 0;
  .wrap-label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .label {
      font-size: 16px;
    }
  }
}
::v-deep .uploadimage {
  .el-form-item__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .upload-demo {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;

      .el-upload {
        margin-right: 10px;
      }
    }
    .demo-image__preview {
      display: flex;
      flex-direction: row;
    }
  }
}
::v-deep .el-dialog__header {
  display: flex;
  .el-dialog__headerbtn {
    top: 0;
  }
}
.action {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>


